<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jun
 * @Date: 2021-05-24 14:58:19
 * @LastEditors: Jun
 * @LastEditTime: 2021-06-04 10:26:15
-->
<template>
  <div>
    <!-- 导航条 -->
    <nav-bar></nav-bar>

    <!-- 表单 -->
    <div class="container">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名" prop="name">
              <my-input v-model="form.name" :isDisabled="disabled"></my-input>
            </el-form-item>

            <el-form-item label="身份证号" prop="idcard">
              <my-input v-model="form.idcard" :isDisabled="disabled"></my-input>
            </el-form-item>

            <el-form-item label="民族" prop="nation">
              <my-select v-model="form.nation" :valueArray="nation" :isDisabled="disabled"></my-select>
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <my-radio v-model="form.sex"  :valueArray="[{label:1,content:'男'},{label:2,content:'女'}]" :isDisabled="disabled"></my-radio>
            </el-form-item>

            <el-form-item label="电话" prop="phone">
              <my-input v-model="form.phone" :isDisabled="disabled"></my-input>
            </el-form-item>

            <el-form-item label="出生日期" prop="birth">
              <date-picker v-model="form.birth" :isDisabled="disabled"></date-picker>
            </el-form-item>

            <el-form-item label="文化程度" prop="education">
              <my-select v-model="form.education" :valueArray="education" :isDisabled="disabled"></my-select>
            </el-form-item>

            <el-form-item label="联系地址" prop="addr">
              <my-input v-model="form.addr" :isDisabled="disabled"></my-input>
            </el-form-item>

            <el-form-item label="准考证头像" prop="icon">
              <upload v-model="form.icon" :isDisabled="disabled"></upload>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="毕业时间">
              <date-picker v-model="form.gdtm" :isDisabled="disabled"></date-picker>
            </el-form-item>

            <el-form-item label="毕业院校">
              <my-input v-model="form.gdsl" :isDisabled="disabled"></my-input>
            </el-form-item>

            <el-form-item label="学位">
              <my-select v-model="form.degree" :valueArray="degree" :isDisabled="disabled"></my-select>
            </el-form-item>

            <el-form-item label="政治面貌">
              <my-select v-model="form.political" :valueArray="political" :isDisabled="disabled"></my-select>
            </el-form-item>

            <el-form-item label="身份证正面照片">
              <upload v-model="form.idpic" :isDisabled="disabled"></upload>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="籍贯">
              <my-input v-model="form.nate" :isDisabled="disabled"></my-input>
            </el-form-item>

            <el-form-item label="国籍">
              <my-input v-model="form.nationality" :isDisabled="disabled"></my-input>
            </el-form-item>

            <el-form-item label="户籍">
              <my-input v-model="form.census" :isDisabled="disabled"></my-input>
            </el-form-item>

            <el-form-item label="身份证背面照片">
              <upload v-model="form.idrpic" :isDisabled="disabled"></upload>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="btn">
          <template v-if="disabled">
            <el-button type="danger" @click="disabled = false">修改信息</el-button>
          </template>
          <template v-else>
            <el-button type="primary" @click="submitForm('form')">确定</el-button>
            <el-button type="info" @click="disabled = true">取消</el-button>
          </template>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {degree} from "utils/degree.js"
import {education} from "utils/education.js"
import {nation} from "utils/nation.js"
import {political} from "utils/political.js"
import {updateUrl} from "api/userInfo.js"

import { createNamespacedHelpers } from 'vuex'
const { mapState,mapMutations } = createNamespacedHelpers('userInfo')

export default {
  data() {
    return {
      form: {
        //表单数据
        name: "", //姓名
        idcard: "", //身份证号
        nation: "", //民族
        sex: "", //性别
        phone: "", //电话
        birth: "", //生日
        education: "", //教育程度
        addr: "", //地址
        icon: "", //准考证头像
        gdtm: "", //毕业时间
        gdsl: "", //毕业院校
        degree: "", //学历
        political: "", //政治面貌
        idpic: "", //身份证正面照片
        nate: "", //籍贯
        nationality: "", //国籍
        census: "", //户籍
        idrpic: "", //身份证反面照片
      },
      rules: {
        //校验规则
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        idcard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            trigger: "blur",
            pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
            message: "请输入正确的身份证号码",
          },
        ],
        nation: [{ required: true, message: "请输入民族", trigger: "blur" }],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          {
            trigger: "blur",
            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
            message: "请输入正确的手机号码",
          },
        ],
        birth: [{ required: true, message: "请输入生日", trigger: "blur" }],
        education: [
          { required: true, message: "请输入教育程度", trigger: "blur" },
        ],
        addr: [{ required: true, message: "请输入地址", trigger: "blur" }],
        icon: [
          { required: true, message: "请上传准考证头像", trigger: "blur" },
        ],
      },
      degree:degree,//学位
      education:education,//教育情况
      nation:nation,//民族
      political:political,//政治面貌
      disabled:true,
    };
  },
  computed:{
    ...mapState(["userInfo"])
  },
  methods:{
    ...mapMutations(['updateUserInfo']),
    API_update(data){
      return this.$httpRequest({
        url:updateUrl,
        method:"POST",
        data:{
          data
        }
      })
    },
    submitForm(formName){//提交表单
      console.log(this.form)
      this.$refs[formName].validate(async(valid) => {
          if (valid) {
            let res = await this.API_update(this.form)//更新接口
            if(res.data.code === 1000){
              this.updateUserInfo(this.form)//更新用户信息

              this.$message.success(res.data.msg)
              this.disabled = true
            }else{
              this.$message.error(res.data.msg)
            }
          } else {
            console.log('验证失败');
            return false;
          }
        });
    }
  },
  created(){
    this.form = this.userInfo
    console.log(this.form)
  }
};
</script>

<style lang="scss" scoped>
@import "style/views/user.scss"
</style>
